import React, { Component } from 'react';

import { Carousel } from 'antd-mobile';

import { connect } from 'react-redux';

import { changeUTitle, toggleIsSubpage } from '../../actions/ui';

import {
  getProductDetail
} from '../../services';

import './Detail.less';

@connect(null, { changeUTitle, toggleIsSubpage })

export default class Detail extends Component {
  constructor() {
    super();
    this.state = {
      detail: {}
    }
  }
  componentDidMount() {
    this.props.toggleIsSubpage(true);
    const { id } = this.props.match.params;
    getProductDetail(id)
      .then(resp => {
        this.setState({
          detail: resp.data
        });
        this.props.changeUTitle(resp.data.name);
      })
  }
  componentWillUnmount() {
    this.props.toggleIsSubpage(false);
  }
  render() {
    const {
      name,
      price,
      //要给默认值
      covers = []
    } = this.state.detail;
    return (
      
      <div>
        <Carousel className="wgd-carousel"
          dots
          swiping
          autoplay
          infinite
          speed={200}
          autoplayInterval={3000}
        >
          {covers.map(item => (
            <div 
              className="wgd-item"
              key={item.img}
            >
              <img
                src={item.img}
                alt={item.name}
              />
            </div>
          ))}
        </Carousel>
        {name}
        {price}
      </div>
    )
  }
}